import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Icon } from '@ant-design/react-native';
import { useNavigation } from '@react-navigation/native';

// 定义组件的 Props 类型
type NavTopProps = {
  title: string; // 导航栏标题
  rightContent?: React.ReactNode; // 右侧内容，可为文字或图标，可选
};

const NavTop: React.FC<NavTopProps> = ({ title, rightContent }) => {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      {/* 左侧返回图标 */}
      <TouchableOpacity onPress={() => navigation.goBack()} style={styles.leftButton}>
        <Icon name="left" size={24} color="#333" />
      </TouchableOpacity>
      {/* 中间标题 */}
      <Text style={styles.title}>{title}</Text>
      {/* 右侧内容 */}
      {rightContent && (
        <TouchableOpacity style={styles.rightButton}>
          {rightContent}
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 8,
    paddingVertical: 12,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  leftButton: {
    padding: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  rightButton: {
    padding: 8,
  },
});

export default NavTop;


{/* 使用 NavTop 组件，传入标题和右侧内容 */ }
{/* <NavTop
  title=""
  rightContent={
    <>
      <Icon name="ellipsis" size={24} color="#333" />
    </>
  }
/> */}